import React from 'react';
import classNames from 'classnames';

import { IconButton, FlatButton as TextButton, RaisedButton as NoticeButton } from 'material-ui';
import CommonConstants from '../../constants/CommonConstants';
import './BasicButtons.css';

import iconHome from './images/iconHome.png';
import iconHelp from './images/iconHelp.png';
import iconArrowRight from './images/iconArrowRight.png';
import iconArrowRightDisabled from './images/iconArrowRightDisabled.png';
import iconArrowLeft from './images/iconArrowLeft.png';

// エイリアス
export {
  TextButton,
  NoticeButton,
}

/**
 * ホームボタン
 */
export const HomeButton = (props) => {
  return (
    <IconButton
      {...props}
      className={classNames('HomeButton', 'icon-home', props.className)}
      iconStyle={{ width: '42px', height: '40px' }}
      style={{ width: '50px', height: '50px', padding: '5px 4px' }}
    >
      <img src={iconHome} alt="" />
    </IconButton>
  );
}
HomeButton.propTypes = IconButton.propTypes;
HomeButton.defaultProps = IconButton.defaultProps;

/**
 * 次へ・詳細を見るボタン
 */
export const NextButton = (props) => {
  return (
    <TextButton
      {...props}
      className={classNames('NextButton', props.className)}
      labelPosition="before"
      labelStyle={{
        fontSize: 'inherit',
        color: props.disabled ? '#bcd9f2' : '#0e7cdc',
      }}
      icon={<img src={props.disabled ? iconArrowRightDisabled : iconArrowRight} className="icon-arrow-right" alt="" height={34} />}
    />
  );
}
NextButton.propTypes = TextButton.propTypes;
NextButton.defaultProps = TextButton.defaultProps;

/**
 * 戻るボタン
 */
export const BackButton = (props) => {
  return (
    props.label
      ? <TextButton
          {...props}
          className={classNames('BackButton', props.className)}
          labelPosition="after"
          labelStyle={{
            fontSize: 'inherit',
            color: '#0e7cdc',
          }}
          icon={<img src={iconArrowLeft} className="icon-arrow-left" alt="" height={34} />}
        />
      : <IconButton
          {...props}
          className={classNames('BackIcon', props.className)}
          iconStyle={{ width: '23px', height: '34px' }}
          style={{ width: '50px', height: '50px', padding: '4px 5px' }}
        >
          <img src={iconArrowLeft} className="icon-arrow-left" alt="" height={34} />
        </IconButton>
  );
}
/*BackButton.propTypes = Object.assign(
  {},
  ...Object.keys(TextButton.propTypes || {}).map(key => ({ key: IconButton.propTypes[key] })),
  { label: React.PropTypes.string });
BackButton.defaultProps = Object.assign(
  {},
  ...Object.keys(TextButton.defaultProps || {}).map(key => ({ key: IconButton.defaultProps[key] })),
  { label: '' });*/

/**
 * ヘルプボタン
 */
export const HelpButton = (props) => {
  return (
    <IconButton
      {...props}
      className={classNames('HelpButton', 'icon-help', props.className)}
      iconStyle={{ width: '38px', height: '38px' }}
      style={{ width: '64px', height: '64px' }}
    >
      <img src={iconHelp} alt="" />
    </IconButton>
  );
}
HelpButton.propTypes = IconButton.propTypes;
HelpButton.defaultProps = IconButton.defaultProps;

/**
 * モーダル起動ボタン
 */
export const ModalOpenButton = (props) => {
  return (
    <TextButton
      {...props}
      className={'ModalOpenButton'}
    />
  );
}

/**
 * リスク判定(高い、低い)表示
 */
export const RiskLevelIcon = ({ level, width = '160px', customclass }) => {
  let cssClass = customclass === undefined ? CommonConstants.RISK_LEVEL[level].cssclass : customclass;
  return (
    <div
      className={classNames('risk-level', cssClass)}
      style={{
        width: width,
      }}
    >
      {CommonConstants.RISK_LEVEL[level].label}
    </div >
  );
}
/*RiskLevelIcon.propTypes = {
  level: React.PropTypes.oneOf(['HIGH', 'A_LITTLE_HIGH', 'LOW']),
  width: React.PropTypes.string,
  customclass: React.PropTypes.string,
};*/
RiskLevelIcon.defaultProps = {};

/**
 * リスクをチェック！ボタン
 */
export const RiskCheckButton = ({ className, label, children, disabled, onTouchTap }) => {
  return (
    <div className="RiskCheckButtonContainer">
      <button
        type="button"
        className={classNames('RiskCheckButton', className, {
          'disabled': disabled,
        })}
        disabled={disabled}
        onClick={onTouchTap}
      >
        <span className="label">{children || label}</span>
      </button>
    </div>
  );
}
/*RiskCheckButton.propTypes = {
  label: React.PropTypes.node,
  children: React.PropTypes.node,
  disabled: React.PropTypes.bool,
  className: React.PropTypes.string,
  onTouchTap: React.PropTypes.func,
};*/
RiskCheckButton.defaultProps = {
  label: '检查风险',
  disabled: false,
  onTouchTap: () => { },
};
